<template>
    <el-row>
        <el-col :span="16">
            <el-button type="primary"  @click="updateResource">保存</el-button>
        </el-col>
        <el-col :span="24" style='margin-top:15px;'>
            <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
           <el-tree
                :data="treeData"
                show-checkbox
                node-key="id"
                default-expand-all
                ref="resourcetree"
                highlight-current
                :default-checked-keys="[5]"
                :props="defaultProps">
                </el-tree>
            <div class="buttons">
                <el-button @click="getCheckedNodes">通过 node 获取</el-button>
                <el-button @click="getCheckedKeys">通过 key 获取</el-button>
                <el-button @click="setCheckedNodes">通过 node 设置</el-button>
                <el-button @click="setCheckedKeys">通过 key 设置</el-button>
                <el-button @click="resetChecked">清空</el-button>
            </div>
        </el-col>
    </el-row>
</template>
<script>
  import { getMenuResourceTreeData } from '@/api/ucmenu'
  import { getRoleResourceList,  saveRoleResources, getSelectedResourceList, saveAllRoleResources } from '@/api/ucroleresource'
  export default {
    name: 'roleresource',
    props:{
        roleId: {
            type: String,
            required: true
        }
    },
    data() {
      return {
        filterText: undefined,
        treeData: [],
        selectedMenuResource: [],
        defaultProps: {
            children: 'children',
            label: 'label',
            id: 'id',
            type: 'type'
         }
      }
    },
    created() {
      this.getRoleMenuList();
    },
    methods: {
      getRoleMenuList() {
        const param = {
          'body': {
              "treeDTO":{
              "name":undefined,
            }
          }
        }
        getMenuResourceTreeData(param).then(response => {
          this.treeData = response.body.treeDTOList;
        });
      },
      getCheckedNodes() {
        console.log(this.$refs.resourcetree.getCheckedNodes());
        console.log(this.$refs.resourcetree.getHalfCheckedNodes());
       
      },
      getCheckedKeys() {
        console.log(this.$refs.resourcetree.getCheckedKeys());
      },
      setCheckedNodes() {
        // this.getSelectedMenu();
        // this.$refs.tree.setCheckedNodes(this.selectedMenuResource);
      },
      setCheckedKeys() {
        this.$refs.resourcetree.setCheckedKeys([3]);
      },
      resetChecked() {
        this.$refs.resourcetree.setCheckedKeys([]);
      },
      updateResource(){
        const halfnodes = this.$refs.resourcetree.getHalfCheckedNodes();
        const nodes = this.$refs.resourcetree.getCheckedNodes();
        const ids = [];
        for (let i = 0; i < halfnodes.length; i++) {
                ids.push({"id":halfnodes[i].id,"type":halfnodes[i].type});
        }
        for (let i = 0; i < nodes.length; i++) {
                ids.push({"id":nodes[i].id,"type":nodes[i].type});
        }
        const param = {
          'body': {
              "ucRoleResourceDTO":{
                	"roleId":this.roleId, 
                    "treeDTOList":ids
            }
          }
        }
        saveAllRoleResources(param).then(() => {
            this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 2000
            });
        });
      },
      getSelectedResources(){
        const param = {
          'body': {
              "ucRoleResourceDTO":{
                    "roleId":this.roleId,
                    "resourceType": "button,uri"
            }
          }
        }
        getSelectedResourceList(param).then(response => {
            this.selectedMenuResource = response.body.treeDTOList;
            // console.log(this.selectedMenuResource);
            // let arr = ['fc318540a7af442b823b09a0ba60c857'];
            this.$refs.resourcetree.setCheckedNodes(this.selectedMenuResource);
            // this.$refs.resourcetree.setCheckedKeys(arr);
        });
      }
    }
  };
</script>

